<!DOCTYPE html>
<html>
<head>
	<title>无表格</title>

	<style type="text/css">
		
		.title{
			font-size: 25px;
			margin-top: 40px;
			margin-bottom: 40px;
			font-weight: bold;
			margin-left: 150px;
		}

		.inputText{
			width: 350px;
			height: 30px;
		    margin-left:20px;
			margin-bottom: 20px;
		}

		.login{
	/*		border:1px solid red;*/
			width: 100%;
			height: 600px;
			background: white;
			position:relative;
			left: 0px ;
			top: 0px ;
			bottom: 0px;
			right: 0px;
			margin:auto;
		}

		.register{
			width: 357px;
			height: 42px;
			margin-left: 18px;
			margin-bottom:20px;
			background:#00c1de;
			color: white;
			font-weight: bold; 
		}

		.checkField{
			text-decoration: none;
			color: #00c1de;
			margin-left: 20px;
		}

		.message{
			color:  #00c1de;
			font-weight: bold;
			margin-left: 10px;
		}

		#ClauseMessage{
			margin-left: 55px;
		}

	</style>

</head>
<body>
		<div class="login">
			<form action="https://baidu.com" id="form1">
			<div class="title">欢迎注册</div>
			<input type="text" name="" class="inputText" placeholder="设置账号名称" id="account" onchange="fAccount();"><span class="message" id="AccountMessage"></span><br>

			<input type="password" name="password" class="inputText" placeholder="设置您的登录密码" id="password" onchange="fPassword();"><span class="message" id="PasswordMessage"></span><br>

			<input type="password" class="inputText" placeholder="请再次输入您的输入密码" id="pawConfirm" onchange="fPawConfirm();"><span class="message" id="PawConfirmMessage"></span><br>

			<input type="text" class="inputText" placeholder="+86：请输入手机号" id="phone" onchange="fPhone();"><span class="message" id="PhoneMessage"></span><br>

			<button class="register" onclick="register();">同意条款并注册</button><br>

			<input type="checkbox" id="clause" class="checkbox" onchange="fClause();"><a href="#" class="checkField">景路网站服务条款|法律申明和隐私权政策</a><span class="message" id="ClauseMessage"></span>
			</form>

		</div>
	
		<script type="text/javascript">
			
			function fAccount(){
				var acc = document.getElementById("account").value;
				var regx = /\w|[\u4E00-\u9FA5]+/;
				if(regx.test(acc)){
					document.getElementById("AccountMessage").innerText = "字母、数字、汉字组合";
					document.getElementById("AccountMessage").style = "color:#00c1de;";
					return true;
				} else {
					document.getElementById("AccountMessage").innerText = "字母、数字、汉字组合";
					document.getElementById("AccountMessage").style = "color:red;";
					document.getElementById("account").style = "border:2px solid red;";
					return false;
				}
			}

			function fPassword(){
				var paw = document.getElementById("password").value;
				var acc = document.getElementById("account").value;
				var regx = /^\S{6,20}$/;
				console.log("paw:",paw);
				console.log("acc:",acc);
				if(regx.test(paw)&&acc!=paw){
					document.getElementById("PasswordMessage").innerText = "6至20个字符（空格除外），不能与账号相同";
					document.getElementById("PasswordMessage").style = "color:#00c1de";
					return true;
				} else {
					document.getElementById("PasswordMessage").innerText = "6至20个字符（空格除外），不能与账号相同";
					document.getElementById("PasswordMessage").style = "color:red";
					document.getElementById("password").style = "border:2px solid red;";
					return false;
				}
			}

			function fPawConfirm(){
				var paw = document.getElementById("password").value;
				var pawConfirm = document.getElementById("pawConfirm").value;
				if(paw!=pawConfirm||pawConfirm==""){
					document.getElementById("PawConfirmMessage").innerText = "两次输入的密码不一致！";
					document.getElementById("PawConfirmMessage").style = "color:red";
					document.getElementById("pawConfirm").style = "border:2px solid red;";
					return false;
				} else {
					document.getElementById("PawConfirmMessage").innerText = "";
					return true;
				}
			}

			function fPhone(){
				var phone = document.getElementById("phone").value;
				var regx = /^\d{11}$/;
				if(regx.test(phone)){
					document.getElementById("PhoneMessage").innerText = "11位合法手机号!";
					document.getElementById("PhoneMessage").style = "color:#00c1de";
					return true;
				} else {
					document.getElementById("PhoneMessage").innerText = "11位合法手机号!";
					document.getElementById("PhoneMessage").style = "color:red";
					document.getElementById("phone").style = "border:2px solid red;";
					return false;
				}
			}

			function fClause(){
				var checkbox = document.getElementById("clause").checked;
				console.log("checkbox:"+checkbox);
				if(checkbox){
					document.getElementById("ClauseMessage").innerText = "";
					return true;
				} else {
					document.getElementById("ClauseMessage").innerText = "请勾选同意协议";
					document.getElementById("ClauseMessage").style = "color:red";
					return false;
				}
			}

			function register(){

				event.preventDefault();

				fAccount();
				fPhone();
				fPassword();
				fPawConfirm();
				fClause();

				if(fAccount()&&fPhone()&&fPassword()&&fPawConfirm()&&fClause()){
					document.getElementById("form1").submit();
				}
			}

		</script>

</body>
</html>